import React, { useState, useEffect } from 'react'
import Style from './index.module.scss'
import { Input, Button, Select, Table, Tag, Switch, message, Modal } from 'antd'
import {
    getInformList,
    apiDelInformList,
    upInformList,
    apiSearchInform,
    apiAddEditInform
} from '../../api'

const { Option } = Select;

// 资讯管理
const Index = () => {

    const column = [
        {
            title: '序号',
            dataIndex: 'id',
            width: '5%',
            editable: true,
            render: (text: any, record: any, index: number) => {
                return index + 1
            },
        },
        {
            title: '文章标题',
            dataIndex: 'title',
            width: '12%',
            editable: true,
        },
        {
            title: '创建人',
            dataIndex: 'name',
            width: '20%',
            editable: true,
        }, {
            title: '创建日期',
            dataIndex: 'time',
            width: '15%',
            editable: true,
        }, {
            title: '状态',
            dataIndex: 'state',
            render: (text: any, record: any) => {
                return (
                    <div style={{ display: 'flex' }}>
                        {
                            record.state === '开启'
                                ? <Switch
                                    checkedChildren="开启"
                                    unCheckedChildren="关闭"
                                    defaultChecked
                                    onChange={() => handleSwitchChange(record)}
                                />
                                : <Switch
                                    checkedChildren="开启"
                                    unCheckedChildren="关闭"
                                    onChange={() => handleSwitchChange(record)}
                                />
                        }
                    </div>
                )
            },

        },
        {
            title: '操作',
            dataIndex: 'operation',
            render: (_: any, record: any) => {
                return (
                    <div style={{ display: 'flex' }}>
                        <Tag color="volcano" onClick={() => EditInform(record)}>编辑</Tag>
                        <Tag color="red" onClick={() => delInform(record)}>删除</Tag>
                    </div >
                )
            },
        },
    ]

    // 存放房源管理 销售楼盘数据
    const [data, setData] = useState([])
    useEffect(() => {
        getInformList().then(res => {
            setData(res.data.data)
        })
    }, [])

    // 搜索事件
    const [Value, setValue] = useState('')
    const [SelectValue, setSelectValue] = useState('')
    const searchInform = () => {
        // console.log(Value);
        // console.log(SelectValue);
        apiSearchInform({ title: Value, state: SelectValue }).then((res: any) => {
            if (res.data.data.length === 0) {
                message.error('占时没有数据')
                setData(res.data.data)
            } else {
                message.success('查询成功')
                setData(res.data.data)
            }

        })
    }

    // 删除事件
    const delInform = (record: any) => {
        apiDelInformList({ id: record.id }).then(res => {
            message.success('删除成功')
            setData(res.data.data)
        })
    }

    // switch 更新
    const handleSwitchChange = (record: any) => {
        upInformList({ id: record.id, state: record.state }).then((res: any) => {
            message.success(res.data.data)
            setData(res.data.data)
        })
    }


    // 编辑
    const [IdValue, setIdValue] = useState('')
    const EditInform = (record: any) => {
        // 保存 id 创建人 文章标题
        setTitleValue(record.title)
        setNameValue(record.name)
        setIdValue(record.id)
        setIsModalVisible(true);
    }

    // 新增事件  // 弹框
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [TitleValue, setTitleValue] = useState('')
    const [NameValue, setNameValue] = useState('')

    const showModal = () => {
        setIsModalVisible(true);
    };

    // 确定
    const handleOk = () => {
        setIsModalVisible(false);
        // console.log(TitleValue);
        // console.log(NameValue);
        // console.log(IdValue);
        apiAddEditInform({ title: TitleValue, name: NameValue, id: IdValue }).then((res: any) => {
            // console.log(res);
            message.success(res.data.data)
            setData(res.data.data)
        })
    };

    // 取消
    const handleCancel = () => {
        setIsModalVisible(false);
    };



    return (
        <div className={Style.box}>


            <div className={Style.boxTop} >

                <p style={{ margin: '0 15px' }}>
                    <span>搜索 </span>
                    <Input style={{ width: '200px' }} placeholder="关键字" value={Value} onChange={(e: any) => setValue(e.target.value)} />
                </p>

                <div>
                    <span>状态 </span>
                    <Select placeholder="请选择" style={{ width: 200 }} onChange={(value) => setSelectValue(value)}>
                        <Option value="开启" key="1">开启</Option>
                        <Option value="关闭" key="2">关闭</Option>
                    </Select>
                </div>

                <Button style={{ margin: '0 15px' }} onClick={searchInform}>查询</Button>
                <Button onClick={showModal}>新增</Button>
            </div>

            {/* 弹框 */}
            <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <p style={{ display: "flex" }}><span style={{ width: "70px" }}>标题 ：</span><Input placeholder='请输入标题' value={TitleValue} onChange={(e) => setTitleValue(e.target.value)}></Input></p>
                <p style={{ display: "flex" }}><span style={{ width: "70px" }}>创建人 ：</span> <Input placeholder='请输入创建人' value={NameValue} onChange={(e) => setNameValue(e.target.value)}></Input></p>
            </Modal>

            <div className={Style.boxBom}>
                <Table
                    style={{ height: '100%' }}
                    columns={column}
                    dataSource={data}
                    rowKey="id"
                />
            </div>
        </div>
    )
}
export default Index

